<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        #captcha {
            --width: 400px;
            --height: 260px;
            --puzzle-width: 80px;
            --puzzle-height: 80px;
            --move: 0px;

            width: var(--width);
            height: var(--height);
            border-radius: 4px;
            background-image: url(../images/zhan11.jpg);
            background-size: cover;
            background-position: center;
            position: relative;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
        }

        #captcha::before,
        #captcha::after {
            position: absolute;
            content: "";
            display: block;
            width: inherit;
            height: inherit;
            background-image: inherit;
            /* background-color: red; */
            background-position: inherit;
            clip-path: inset(
                    /* 上右下左的方向内内缩小 */
                    calc((var(--height) - var(--puzzle-height)) / 2) var(--puzzle-width) calc((var(--height) - var(--puzzle-height)) / 2) calc(var(--width) - var(--puzzle-width) * 2));
            -webkit-clip-path: inset(
                    /* 上右下左的方向内内缩小 */
                    calc((var(--height) - var(--puzzle-height)) / 2) var(--puzzle-width) calc((var(--height) - var(--puzzle-height)) / 2) calc(var(--width) - var(--puzzle-width) * 2));
        }

        ::after {
            transform: translateX(clamp(calc(var(--width) * -1),
                        calc(var(--width) * -1 + var(--move)),
                        calc(var(--puzzle-width))));
            transition: .25s all ease-in-out;
        }

        #captcha:active::after {
            transition: none;
        }

        #captcha::before {
            background-color: rgba(0, 0, 0, .6);
            /* 可以将半透明的黑色与背景图片混合 */
            background-blend-mode: color;
            transition: none;
        }

        #handle {
            width: calc(var(--width) + var(--puzzle-width) * 2);
            height: 30px;
            background-color: #eee;
            position: absolute;
            bottom: -50px;
            left: calc(var(--puzzle-width) * 2 * -1);
            box-shadow: inset 0 0 12px rgba(0, 0, 0, .2);
            border: 3px solid #ccc;
            border-radius: 18px;
        }

        #handle span {
            display: block;
            width: var(--puzzle-width);
            height: inherit;
            border-radius: inherit;
            background-color: #fff;
            box-shadow: inset 0 0 6px rgba(0, 0, 0, .25), 0 2px 4px rgba(0, 0, 0, .3);
            cursor: move;
            transform: translateX(clamp(
                        /* 最小值*/
                        0px,
                        /* 移动的距离 */
                        var(--move),
                        /* 移动的最大距离 */
                        calc(var(--width) + var(--puzzle-width))));
            transition: .25s all ease-in-out;
        }

        #captcha:active #handle span {
            transition: none;
        }

        /* 设置验证通过时的样式 */
        #captcha.passed::before,
        #captcha.passed::after,
        #captcha.passed #handle {
            opacity: 0;
        }
    </style>
</head>

<body>
    <div id="captcha">
        <div id="handle">
            <span></span>
        </div>
    </div>
    <script>
        const capacha = document.querySelector('#captcha')
        const handle = document.querySelector('#handle')
        const button = document.querySelector('#captcha span')
        // 增加一个变量，用于判断是否可移动
        let shouldMove = false

        // 给移动按钮添加鼠标事件
        button.addEventListener('mousedown', (e) => {
            shouldMove = true
        })

        button.addEventListener('mousemove', (e) => {
            // 如果可移动
            if (shouldMove) {
                const offsetLeft = handle.getBoundingClientRect().left
                const buttonWidth = button.getBoundingClientRect().width

                capacha.style.setProperty('--move', `${e.clientX - offsetLeft - buttonWidth / 2}px`)
            }
        })

        button.addEventListener('mouseup', (e) => {
            if (shouldMove) {
                shouldMove = false
                const finalOffset = e.clientX - handle.getBoundingClientRect().left

                if (finalOffset >= 430 && finalOffset <= 450) {
                    capacha.classList.add('passed')
                } else {
                    capacha.style.setProperty('--move', '0px')
                }
            }
        })
    </script>
</body>

</html>